<template>
<el-dialog title="选择成员" :visible.sync="visibleDialog" width="600px" append-to-body class="promoter_person">
  <div class="person_body clear">
    <div class="person_tree l">
      <input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event)">
      <p class="ellipsis tree_nav" v-if="!searchVal">
        <span @click="getPersonList(0)" class="ellipsis">{{departments.o_OrganName || '成员'}}</span>
      </p>
        <!-- <el-button @click="getPersonList">click{{departments.personList}}</el-button> -->
        <!-- <span v-for="(item,index) in departments.titleDepartments" class="ellipsis" 
                  :key="index+'a'" @click="getDepartmentList(item.id)">{{item.departmentName}}</span> -->
        <!-- <li v-for="(item,index) in departments.childDepartments" :key="index+'b'" class="check_box" :class="{not: !isDepartment}">
      <a v-if="isDepartment" :class="$func.toggleClass(checkedDepartmentList,item)&&'active'" @click="$func.toChecked(checkedDepartmentList,item)">
        <img src="@/assets/images/icon_file.png">{{item.departmentName}}</a>
      <a v-else><img src="@/assets/images/icon_file.png">{{item.departmentName}}</a>
      <i @click="getDepartmentList(item.id)">下级</i>
    </li> -->
      <ul class="person-list" placeholder="人员列表为空">
        <!-- <li v-for="(item,index) in personList" :key="index + '_person'" class="check_box">
          <a :class="$func.toggleClass(checkedEmployessList,item, 'P_PersonID')&&'active'" @click="$func.toCheckedDb(checkedEmployessList,item, 'p_PersonID')" :title="item.o_OrganName">
            <img src="@/assets/images/icon_people.png">{{item.p_PersonName}}</a>
        </li> -->
		<el-checkbox-group v-model="radio">
		  <el-checkbox style="display: block" v-for="(item,index) in personList" :label="item.p_PersonName" :key="index">
			  <a :class="$func.toggleClass(checkedEmployessList,item, 'P_PersonID')&&'active'" @click="$func.toChecked(checkedEmployessList,item, 'p_PersonID')" :title="item.o_OrganName">
			    <img src="@/assets/images/icon_people.png">{{item.p_PersonName}}</a>
		  </el-checkbox>
		</el-checkbox-group>
      </ul>
     <!-- <div>
          <el-checkbox-group v-model="radio">
            <el-checkbox style="display: block" v-for="(item,index) in personList" :label="item.p_PersonID" :key="index">{{item.p_PersonName}}</el-checkbox>
          </el-checkbox-group>
      </div> -->
      <div>

      </div>
        <!-- <li v-for="(item,index) in departments.employees" :key="index+'c'" class="check_box">
     <a :class="$func.toggleClass(checkedEmployessList,item)&&'active'" @click="$func.toChecked(checkedEmployessList,item)" :title="item.departmentNames">
      <img src="@/assets/images/icon_people.png">{{item.employeeName}}</a>
    </li> -->
    </div>
    <div class="has_selected l">
      <p class="clear">已选（{{total}}）
        <a @click="delList">清空</a>
      </p>
      <ul>
        <li v-for="(item,index) in checkedEmployessList" :key="index + 'e'">
          <img src="@/assets/images/icon_people.png">
          <span>{{item.p_PersonName}}</span>
          <img src="@/assets/images/cancel.png" @click="$func.removeEle(checkedEmployessList,item,'p_PersonID')">
        </li>
      </ul>
    </div>
        <!-- <template v-if="isDepartment">
     <li v-for="(item,index) in checkedDepartmentList" :key="index+'d'">
      <img src="@/assets/images/icon_file.png">
      <span>{{item.departmentName}}</span>
      <img src="@/assets/images/cancel.png" @click="$func.removeEle(checkedDepartmentList,item)">
     </li>
    </template> -->
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="$emit('update:visible',false)">取 消</el-button>
    <el-button type="primary" @click="saveDialog">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
import { GetPersonnelList } from "@/api/apis/flowPath"
// import nodeWrapVue from '../nodeWrap.vue'
import mixins from './mixins'
export default {
  mixins: [mixins],
  props: ['visible', 'data', 'isDepartment'],
  watch: {
    visible(val) {
      // eslint-disable-next-line no-
      this.visibleDialog = this.visible
      if (val) {
        // this.getDepartmentList();
        this.getPersonList();
        this.searchVal = "";
        this.checkedEmployessList = this.data.filter(item => item.type === 1).map(({
          name,
          targetId
        }) => ({
          /* employeeName: name,
          id: targetId */
          p_PersonName: name,
          p_PersonID: targetId
        }));
        /* this.checkedDepartmentList = this.data.filter(item => item.type === 3).map(({
          name,
          targetId
        }) => ({
          departmentName: name,
          id: targetId
        })); */
      }
      
    },
	checkedEmployessList: {
		deep: true, //深度监听设置为 true
		handler: function(newV, oldV) {
			let radio = []
			newV.forEach(el=>{
				radio.push(el.p_PersonName)
			})
			console.log(newV,radio)
			this.radio = radio
			console.log(this.radio,"ro")
		}
	},
    visibleDialog(val) {
      this.$emit('update:visible', val)
    }
  },
  computed: {
    total() {
      return this.checkedDepartmentList.length + this.checkedEmployessList.length
    }
  },
  data() {
    return {
      checkedDepartmentList: [],
      checkedEmployessList: [],
      personList: [],
      radio: []
    }
  },
  methods: {
    saveDialog() {
      // eslint-disable-next-line no-
      let checkedList = [...this.checkedDepartmentList, ...this.checkedEmployessList].map(item => ({
        type: item.p_PersonName ? 1 : 3,
        targetId: item.p_PersonID,
        personCode: item.p_PersonCode,
        name: item.p_PersonName || item.departmentName
      }))
      this.$emit('change', checkedList)
    },
    delList() {
      this.checkedDepartmentList = [];
      this.checkedEmployessList = []
    },
    //* 获取当前部门下的人员列表
    async getPersonList(OrganID = '') {
      try {
        const res = await GetPersonnelList({
          page: "1", //当前页码
          limit: "9999", //每页显示多少
          departmentID: "", //部门ID
          Sequence: "descending", //排序方式
          SequenceName: "P_PersonID" //排序字段
        })
        this.personList = res.data[1]
      } catch (error) {
        this.$message.error('请求人员接口出错，请联系管理员。', error);
      }
      //  this.$axios.get(`${process.env.BASE_URL}departments-ya.json?page=1&limit=1000000&OrganID=${OrganID}`).then(res => {
      // this.$axios.post(`/PersonManage/GetList?page=1&limit=1000000&OrganID=${OrganID}`, {}).then(res => {
      //   this.personList = res.data;
      // }).catch((error) => {
      //   this.$message.error('请求人员接口出错，请联系管理员。', error);
      // });
    }
  }
}
</script>

<style src="../../css/dialog.css" src="../../css/override-element-ui.css" src="../../css/dialog.css" scoped>
.person-list:empty::before {
  content: attr(placeholder);
  color: #ccc;
  font-size: 18px;
}
</style>
